<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    console.time('fragment')
    
    var arr = [];
    var frame = document.createDocumentFragment()
    
    for (var i = 1; i <= 1000; i++) {
      arr.push(i) //假设arr装载了100个好友数据
    }
    
    var renderFriendList = function (data) {
      for (var i = 0, l = data.length; i < l; i++) {
        var div = document.createElement('div');
        div.innerHTML = i;
        frame.appendChild(div)
      }

      document.body.appendChild(frame)
    }
    
    renderFriendList(arr)
    
    console.timeEnd('fragment')
    
  </script>
</body>
</html>